<script setup>

import { onMounted, ref } from 'vue';
import AddOrUPdate from './addOrUpdate.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { deleteLogisticsCompanyApi, getLogisticsCompanyListApi, getLogisticsCompanyPageApi } from '@/api/logisticsCompany';
import { deleteLogisticsPriceApi, getLogisticsPricePageApi } from '@/api/logisticsPrice';

const companyList = ref([])
const addOrUpdateRef = ref(null)
const page = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)
const priceList = ref([])
const searchForm = ref({
  category: '',
  logisticsCompanyId: '',
})
const categoryType = ref([
    {id: '1', name: '同城'},
    {id: '2', name: '同省'},
    {id: '3', name: '跨省'},
    {id: '4', name: '经济区互寄'},
])


const handleDelete = (row) => {
  ElMessageBox.alert('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const res = await deleteLogisticsPriceApi(row.id)
        if(res.code == 1){
            ElMessage.success('删除成功')
            getPricePage()
        }else{
            ElMessage.error('删除失败')
        }
    }).catch(() => {
})
}
const handleEdit = (row) => {
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '编辑物流价格'
  addOrUpdateRef.value.reset()
  addOrUpdateRef.value.priceForm = JSON.parse(JSON.stringify(row))
}
const add = () =>{
  addOrUpdateRef.value.dialogFormVisible = true
  addOrUpdateRef.value.title = '新增物流价格'
  addOrUpdateRef.value.reset()
}
const reset = () =>{
    searchForm.value.category = ''
    searchForm.value.logisticsCompanyId = ''
    getPricePage()
}
const handleSizeChange = (val) => {
  pageSize.value = val
  page.value = 1
  getPricePage()
}
const handleCurrentChange = (val) => {
  page.value = val
  getPricePage()
}
const getPricePage = async () => {
  const res = await getLogisticsPricePageApi(page.value, pageSize.value, searchForm.value.category,searchForm.value.logisticsCompanyId)
  priceList.value = res.data.rows
  totalSize.value = res.data.total
}

const getCompanyList = async () => {
    const res = await getLogisticsCompanyListApi()
    companyList.value = res.data
}

onMounted(() => {
  getPricePage()
  getCompanyList()
})

</script>

<template>

    <div style="display: flex; justify-content: space-between; align-items: center;">
      <el-button type="primary" @click="add">添加</el-button>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="类型" style="width: 200px;" placeholder="请选择">
          <el-select v-model="searchForm.category" placeholder="请选择">
            <el-option v-for="item in categoryType" :label=item.name  :value=item.id />
          </el-select>
        </el-form-item>
        <el-form-item label="所属公司" style="width: 200px;" placeholder="请选择">
          <el-select v-model="searchForm.logisticsCompanyId" placeholder="请选择">
            <el-option v-for="item in companyList" :label=item.companyName  :value=item.id />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getPricePage">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="priceList" style="width: 100%">
    <el-table-column type="index" label="序号" />
    <el-table-column prop="cubePrice" label="每立方费用" />
    <el-table-column prop="kilogramPrice" label="每千克费用" />
    <el-table-column prop="transKilometerPrice" label="每千米运输费用" />
    <el-table-column prop="category" label="类型">
      <template #default="scope">
        <span v-for="item in categoryType" :key="item.id">
          <el-tag v-if="scope.row.category == item.id">{{ item.name }}</el-tag>
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="logisticsCompanyId" label="物流公司名称">
      <template #default="scope">
        <span v-for="item in companyList" :key="item.id">
          <el-tag v-if="scope.row.logisticsCompanyId == item.id">{{ item.companyName }}</el-tag>
        </span>
      </template>
    </el-table-column>

    <el-table-column width="200px" label="操作">
      <template #default="scope">
        <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  <AddOrUPdate ref="addOrUpdateRef" @refresh="getPricePage" />

</template>